<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="title" default=""/>
        <cc:attribute name="subTitle" default =""/>
        <cc:attribute name="yLabel" default =""/>
        <cc:attribute name="xLabel" default="Date"/>
        <cc:attribute name="showMarkers" default="true" />
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <h:outputScript name="javascript/highcharts/js/highcharts.js" target="head" />

        <!--
        These are only here due to a bug in Faces 2.1
        <h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
        <h:outputScript library="javascript/myHighcharts" name="TimeScatterChart.js" target="head" />
        <h:outputScript library="javascript/highcharts/js/" name="highcharts.js" target="head" />-->
        <div id="#{cc.id}_chartDiv"/>
           
            <script type="text/javascript">
                $(function() {
                    var options = {
                        credits: {
                            enabled: false
                        },
                        chart: {
                             renderTo: '#{cc.id}_chartDiv',
                             type: '#{cc.attrs.type}',
                             zoomType: 'x',
                             width:720
                         },
                         title: {
                             text: '#{cc.attrs.title}'
                         },
                         subtitle: {
                             text: '#{cc.attrs.subTitle}'
                         },
                         xAxis: {
                             type: 'datetime',
                             dateTimeLabelFormats: {
                                 month: '%e. %b',
                                 year: '%b'
                             },
                             title: {
                                 enabled: true,
                                 text: '#{cc.attrs.xLabel}'
                             },
                             startOnTick: true,
                             endOnTick: true,
                             showLastLabel: true
                         },
                         yAxis: {
                             title: {
                                 text: '#{cc.attrs.yLabel}'
                             }
                         },
                         legend: {
                             enabled: false
                         },
                         plotOptions: {
                            series: {
                                marker: {
                                    // A more general place for this options would be in individual series.                               }
                                    enabled: #{cc.attrs.showMarkers}
                                }
                            }
                         }
                     };
                 <cc:insertChildren />
                 if(typeof options.series !== "undefined") {
                    if(options.series.length >1) {
                       options.legend.enabled = 'true';
                    }
                    var chart = new Highcharts.Chart(options);
                }
            });
            </script>
    </cc:implementation>
</html>